<template>
    <div class="menu-container">
        <el-row :gutter="20">
            <el-col :span="12">

                <el-form ref="menuField" :model="menuField" :rules="rules" :hide-required-asterisk="true" label-width="80px" size="small">
                    <el-form-item label="菜单类型">
                        <el-radio-group v-model="menuField.menuType">
                            <el-radio label="M">目录</el-radio>
                            <el-radio label="C">菜单</el-radio>
                            <el-radio label="F">按钮</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="菜单名称" prop="menuName">
                        <el-input v-model="menuField.menuName" placeholder="输入菜单的名称" maxlength="10"></el-input>
                    </el-form-item>
                    <el-form-item label="上级菜单">
                        <el-tree-select ref="tree" :styles="styles" v-model="menuField.parentId" :selectParams="selectParams" :treeParams="treeParams" @select-clear="selectClear"/>
                    </el-form-item>
                    <el-form-item label="菜单图标" class="icon">
                        <i :class="menuField.icon" v-if="menuField.icon"></i>
                        <el-button @click="openDrawer">选择图标</el-button>
                    </el-form-item>
                    <!-- <el-form-item label="菜单图标">
                        <el-input v-model="menuField.icon" placeholder="请选择菜单的图标" maxlength="50">
                            <template slot="append">
                                <el-tooltip content="请在最右区域侧选择菜单图标" placement="top">
                                    <svg-icon icon-class="star"/>
                                </el-tooltip>
                            </template>
                        </el-input>
                    </el-form-item> -->
                    <el-form-item label="路由地址">
                        <el-input v-model="menuField.path" placeholder="例如: /permission/list" maxlength="50"></el-input>
                    </el-form-item>
                    <el-form-item label="组件路径">
                        <el-input v-model="menuField.component"
                                  placeholder="用于: import('src/views/permission/index')" maxlength="50"></el-input>
                    </el-form-item>
                    <el-form-item label="元数据">
                        <el-input v-model="menuField.meta"
                                  placeholder="例如: { title: 'permission', icon: 'lock', noCache: true }" maxlength="50"></el-input>
                    </el-form-item>
                    <el-form-item label="显示顺序">
                        <el-input v-model="menuField.orderNum" placeholder="填入所要显示的顺序数字" maxlength="10"></el-input>
                    </el-form-item>
                    <el-form-item label="权限字符">
                        <el-input v-model="menuField.perms" placeholder="例如: /permission/list" maxlength="50"></el-input>
                    </el-form-item>
                    <el-form-item label="菜单状态">
                        <el-radio-group v-model="menuField.status" size="mini">
                            <el-radio-button :label="1">有效</el-radio-button>
                            <el-radio-button :label="0">无效</el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="左侧显示">
                        <el-radio-group v-model="menuField.hidden" size="mini">
                            <el-radio-button :label="0">显示</el-radio-button>
                            <el-radio-button :label="1">隐藏</el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit('menuField')" :loading="disabled">修改菜单
                        </el-button>
                        <el-button @click="goBack">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col :span="12">

            </el-col>
        </el-row>
        <ChooseIcon ref="ChooseIcon"  @setIcon="setIcon" />
    </div>
</template>

<script>
import {getAllMenus, updateMenu, getMenuById} from 'src/api/permission'
import ChooseIcon from './components/ChooseIcon.vue'
export default {
    name: "MenuUpdate",
       components: {
       ChooseIcon
    },
    data() {
        return {
            menuField: {},
            disabled: false,
            styles: {
                width: '100%'
            },
            selectParams: {
                'size': 'mini',
                'clearable': true,
                'placeholder': '默认为根级菜单 可选择上级菜单'
            },
            treeParams: {
                'clickParent': true,
                'filterable': false,
                'check-strictly': false, // 父子关联
                'default-expand-all': false,
                'expand-on-click-node': false,
                'highlight-current': true,
                data: [],
                props: {
                    children: 'children',
                    label: 'menuName',
                    value: 'id'
                }
            },
            rules: {
                menuName: [
                    { required: true, message: '菜单名称不能为空', trigger: 'blur' }
                ]
            }
        }
    },
    created() {
        this.getAllMenus()
        this.getMenuInfo({
            id: this.$route.query.id
        })
    },
    methods: {
        getMenuInfo(id) {
            getMenuById(id).then(response => {
                this.menuField = response.data
            })
        },
        getAllMenus() {
            getAllMenus().then(response => {
                this.$refs.tree.treeDataUpdateFun(response.data)
            })
        },
        selectClear() {
            this.menuField.parentId = 0
        },
        onSubmit(formName) {
            this.$refs[formName].validate((valid) => {

                if (valid) {
                    this.disabled = true
                    window.setTimeout(() => {
                        this.disabled = false
                    }, 2000)

                    updateMenu(this.menuField).then(response => {
                        if(response.code == 20000) {
                            this.$message.success({
                                message: '更新成功 即将返回菜单列表',
                                duration: 2000,
                                center:true
                            })

                            window.setTimeout(() => {
                                this.goBack()
                            }, 600)
                        } else {
                            this.$message.error({
                                message: response.message,
                                duration: 2000,
                                center:true
                            })
                        }
                    })
                }
            })
        },
        goBack() {
            this.$router.back()
        },
        openDrawer(){
            this.$refs.ChooseIcon.openDrawer()
        },
        setIcon(icon){
            this.menuField.icon=icon
        }
    }
}
</script>

<style lang="scss" scoped>
.menu {
    &-container {
        margin: 30px;

        i {
            font-size: 22px;
            color: gray;
            padding: 6px;
        }

    }
}
 :deep .icon .el-form-item__content{
    display: flex;
    align-items: center;
}
</style>
